import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    Clipboard
} from 'react-native';
import { conditionObjWithType } from '../../../../utils/Conditions'
import { ToastToUser } from '../../../../utils/CustomToast';


export default class CarRecordBox extends Component {

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.topBox}>
                    <View style={{position: 'relative'}}>
                        <View style={{height:11, width: '100%', backgroundColor: '#FFEE3B', position: 'absolute', left: 0, top: 9}}></View>
                        <Text style={styles.titleText}>车辆档案</Text>
                    </View>
                    {
                        this.props.data.vcode ?
                            <View style={styles.topRightBox}>
                                <Text style={styles.vcodeText}>{this.props.data.vcode}</Text>
                                <TouchableOpacity
                                    style={styles.copyBox}
                                    onPress={()=>{
                                        this.copyAction()
                                    }}
                                >
                                    <Text style={styles.copyText}>复制</Text>
                                </TouchableOpacity>
                            </View>
                            :
                            null
                    }
                </View>

                <View style={[styles.carInfoBottomBox, {marginTop: 18}]}>
                    <View style={styles.carInfoBottomItemBox}>
                        <Text style={styles.bottomTitleText}>{this.props.data.registerDate ? this.props.data.registerDate : '-'}</Text>
                        <Text style={styles.bottomDesText}>上牌日期</Text>
                    </View>
                    <View style={styles.carInfoBottomItemBox}>
                        <Text style={styles.bottomTitleText}>{this.props.data.mileage ? (this.props.data.mileage / 10000).toFixed(2) + '万' : '-'}</Text>
                        <Text style={styles.bottomDesText}>表显里程</Text>
                    </View>
                    <View style={styles.carInfoBottomItemBox}>
                        <Text style={styles.bottomTitleText}>{this.props.data.color && this.props.data.color.length > 0 ? this.props.data.color[0].outerColor:'-'}</Text>
                        <Text style={styles.bottomDesText}>颜色</Text>
                    </View>
                    <View style={styles.carInfoBottomItemBox}>
                        <Text style={styles.bottomTitleText}>{this.props.data.emissionStd ? conditionObjWithType('emissionStd')[this.props.data.emissionStd] : '-'}</Text>
                        <Text style={styles.bottomDesText}>排放标准</Text>
                    </View>
                </View>

                <View style={styles.carInfoBottomBox}>
                    <View style={styles.carInfoBottomItemBox}>
                        <Text style={styles.bottomTitleText}>{this.props.data.energyType ? conditionObjWithType('energyType')[this.props.data.energyType] : '-'}</Text>
                        <Text style={styles.bottomDesText}>燃油类型</Text>
                    </View>
                    <View style={styles.carInfoBottomItemBox}>
                        <Text style={styles.bottomTitleText}>{this.props.data.displacement ? (this.props.data.displacement).toFixed(1) +(this.props.data.turbo ? 'T':'L') : '-'}</Text>
                        <Text style={styles.bottomDesText}>排量</Text>
                    </View>
                    <View style={styles.carInfoBottomItemBox}>
                        <Text style={styles.bottomTitleText}>{this.props.data.gearboxType ? conditionObjWithType('gearboxType')[this.props.data.gearboxType] : '-'}</Text>
                        <Text style={styles.bottomDesText}>变速箱</Text>
                    </View>
                    <View style={styles.carInfoBottomItemBox}>
                        <Text style={styles.bottomTitleText}>{this.props.data.transferTimes !== '' && this.props.data.transferTimes != undefined ? this.props.data.transferTimes+'次':'-'}</Text>
                        <Text style={styles.bottomDesText}>过户次数</Text>
                    </View>
                </View>
                <View style={styles.carInfoBottomBox}>
                    <View style={styles.carInfoBottomItemBox}>
                        <Text style={styles.bottomTitleText}>{this.props.data.useNature ? conditionObjWithType('useNature')[this.props.data.useNature] : '-'}</Text>
                        <Text style={styles.bottomDesText}>使用性质</Text>
                    </View>
                    <View style={styles.carInfoBottomItemBox}>
                        <Text style={styles.bottomTitleText}>{this.props.data.annualInspectionDate ? this.props.data.annualInspectionDate : '-'}</Text>
                        <Text style={styles.bottomDesText}>年检到期</Text>
                    </View>
                    <View style={styles.carInfoBottomItemBox}>
                        <Text style={styles.bottomTitleText}>{this.props.data.insuranceDate ? this.props.data.insuranceDate : '-'}</Text>
                        <Text style={styles.bottomDesText}>交强险到期</Text>
                    </View>
                    <View style={styles.carInfoBottomItemBox}>
                        <Text style={styles.bottomTitleText}>{this.props.data.merchantCity ? this.props.data.merchantCity : '-'}</Text>
                        <Text style={styles.bottomDesText}>所在地</Text>
                    </View>
                    {/*<View style={[styles.carInfoBottomItemBox, styles.carInfoBottomItemWidthstyle]}>*/}
                    {/*    <Text style={styles.bottomDesText}>{''}</Text>*/}
                    {/*</View>*/}
                </View>
                <TouchableOpacity
                    style={styles.lookBox}
                    onPress={()=>{
                        this.lookRecordDetail()
                    }}
                >
                    <Text style={styles.lookText}>{'查看详情档案>>'}</Text>
                </TouchableOpacity>
            </View>
        )
    }

    copyAction() {
        Clipboard.setString(this.props.data.vcode)
        ToastToUser('复制成功')
    }

    lookRecordDetail() {
        if (this.props.lookRecordDetail) {
            this.props.lookRecordDetail()
        }
    }

}

const styles = StyleSheet.create({
    container: {
        marginTop: 10,
        marginHorizontal: 8,
        borderRadius: 6,
        flexDirection: 'column',
        backgroundColor: '#fff',
        padding: 16,
    },
    topBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    topRightBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    titleText: {
        color: '#333',
        fontWeight: 'bold',
        fontSize: 16,
        paddingHorizontal: 1
    },
    vcodeText: {
        fontSize: 12,
        color: '#666666'
    },
    copyBox: {
        paddingLeft: 8,
    },
    copyText: {
        fontSize: 12,
        color: '#F99802'
    },
    carInfoBottomBox: {
        marginTop: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: 42,
    },
    carInfoBottomItemBox: {
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        // height: '100%',
        width: '25%',
    },
    bottomTitleText: {
        fontSize: 14,
        fontWeight: '500',
        color: '#333333',
    },
    bottomDesText: {
        marginTop: 8,
        fontSize: 12,
        color: '#666666',
    },
    remarkBg: {
        marginTop: 14,
        padding: 12,
        backgroundColor: '#F9F9F9',
        borderRadius: 4
    },
    rearmkText: {
        color: '#666666',
        fontSize: 14
    },
    lookBox: {
        marginTop: 15,
        width: '100%',
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 6,
        // backgroundColor: '#F9F9F9'
    },
    lookText: {
        fontSize: 12,
        color: '#F99802'
    }
})